<template>
    <div class="code page">
        <div class="con">
            <div class="txt" v-if="course">
                <p>标题: {{course.name}}</p>
                <p>地址: {{course.address}}</p>
                <p>时间: {{parseTime(course.time)}}</p>
            </div>
            <img :src="url" alt="" class="img">
        </div>
    </div>
</template>

<script>
    import QRCode from 'qrcode'
    import {info} from "../../api/course";
    import {parseTime} from "../../common/js/time";

    export default {
        activated(){
            let code = this.$route.query.code
             let courseId = this.$route.query.courseId
            if(courseId){
                info(courseId).then(res=>{
                    this.course = res.data
                })
            }
            // console.log(code)
            // let  QRCode =  require('qrcode')
            QRCode.toDataURL(code, {type:'terminal',errorCorrectionLevel:'H'}, (err, url)=> {
                // this.showSlot(code)
                this.url = url
            })
        },
        methods:{
            parseTime(time){
                return parseTime(time)
            }
        },
        data(){
            return {
                course:null,
                url : null
            }
        }
    }
</script>

<style scoped lang="stylus">
    .code
        background  $page-bg
        background-size 100% auto
        z-index 2
        height 100%
        .con
            background-color rgba(37, 38, 45,1)
            height 100%
            display flex
            align-items center
            flex-direction column
            justify-content center
            padding 0 20px
            .txt
                margin-bottom 10px
                width 100%
                color  #4E3D07
                background-color white
                p

                    font-size 12px
                    margin 10px 10px
            .img
                width 100%

</style>